<template>
  <div class="add_field">
    <el-dialog
      title="新增列"
      :visible.sync="addFieldBoxVisible"
      width="70%"
      :close-on-click-modal="false"
      :show-close="false"

      v-loading="loading"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="content">
        <div class="sheets">
          <el-radio
            @change="setActive(loadSheet)"
            v-for="loadSheet in getLoadSheet"
            :key="loadSheet.showName"
            v-model="sheetName"
            :value="loadSheet.showName"
            :label="loadSheet.showName"
          ></el-radio>
        </div>

        <div class="table">
            <div v-if="table == ''">
                <h3>暂无选中任何表格</h3>
            </div>

            <div v-else v-html="table"></div>
        </div>
      </div>

      <div class="paramter">
            <el-input placeholder="请输入表达式" v-model="expression"></el-input>
            <el-input placeholder="请输入新增列名" v-model="fieldName"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="setAddFieldBoxVisible(false)">取 消</el-button>
        <el-button type="primary" @click="addField">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["addFieldBoxVisible"],
  data() {
    return {
      expression: "",
      fieldName: "",
      sheetName: "",
      table: "",
      loading: false,
      loadingText: "正在新增该列......",
    };
  },
  computed: {
    getLoadSheet() {
      return this.$store.state.loadSheet.loadSheetList;
    },
  },
  methods: {
    setAddFieldBoxVisible(val) {
      this.$emit("set-add-field-box-visible", val);
    },
    setActive(loadSheet) {
      this.table = loadSheet.table;
    },
    checkStyle(){
      if(this.sheetName == ""){
          this.$message.error("请选中一个表格")
          return false
      }

      else if(this.expression == ""){
          this.$message.error("请输入一个表达式")
          return false
      }

      else if(this.fieldName == ""){
          this.$message.error("请输入新增的列名")
          return false
      }

      return true
    },
    addField() {
        if(!this.checkStyle()) return
        
        let data = {
            expression: this.expression,
            field_name: this.fieldName,
            sheet_name: this.sheetName,
        }

        this.loading = true
        this.$axios.post('/addField', data)
        .then(res => {
            this.loading = false

            if(res.code == 200){
                this.$message({
                    type: 'success',
                    message: res.msg
                })
                this.setAddFieldBoxVisible(false)
                this.$store.commit('setLoadSheet', res.data)
            }else this.$message.error(res.msg)
        }).catch(() => {
          this.loading = false
        })

        this.sheetName = ""
        this.expression = ""
        this.fieldName = ""
        this.table = ""
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-around;

  max-height: 300px;
}

.sheets{
    width: 20%;
    margin-right: 20px;
    overflow-y: auto;
}

.table{
    width: 75%;
    
    border-left: 1px solid rgb(197, 196, 196);
    padding-left: 20px;

    overflow: auto;
}

.paramter{
    height:100px;
    margin-top:20px;

    display:flex;
    flex-direction: column;
    justify-content: space-around;
}

</style>